<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>News Detail</title>
    <link rel="stylesheet" href="./css/bootstrap.css" />
    <script src="js/jquery.js"></script>
    <script src="js/poper.js"></script>
    <script src="js/bootstrap.js"></script>
    <style>
      .btn-yellow {
        color: black;
        background-color: #fdeb8c;
        border-color: #fdeb8c;
        font-weight: bold;
        border-radius: 30px;
        transition: 0.5s;
      }
      .desc {
        position: absolute;
        bottom: 200px;
        left: 100px;
        color: white;
        letter-spacing: 1px;
      }
    </style>
  </head>
  <body>
    <header style="background-color: #419fe7">
      <nav class="navbar px-5">
        <img
          src="./img/logo.png"
          style="filter: brightness(0)"
          class="navbar-brand"
          alt=""
          width="300"
        />
        <ul class="navbar-nav flex-row"></ul>
      </nav>
    </header>
    <div class="banner position-relative mb-5"></div>
    <main></main>
    <div class="toast show position-fixed" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <strong class="mr-auto text-dark">Warning</strong>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body mx-auto">
        <p class="text-center font-weight-bold">Can you sure logout ?</p>
        <button class="btn cancle btn-outline-dark">cancle</button>
        <button class="btn px-3 sure btn-outline-danger">sure</button>
      </div>
    </div>

    <div class="modal fade" id="editNews" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-xl" >
        <div class="modal-content" style="background: #ffffffd4;">
          <div class="modal-header">
            <h2 class="modal-title" style="font-size: 40px;"  id="exampleModalLabel">
              Modify News
            </h2>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form action="#" id="form" class="form">
              <div class="form-group">
                <label for="recipient-name" class="col-form-label font-weight-bold" style="font-size: 20px;">Author:</label>
                <input type="text" autocomplete="off" class="form-control" name="author">
              </div>

              <div class="form-group">
                <label for="recipient-name" class="col-form-label font-weight-bold" style="font-size: 20px;">press:</label>
                <input type="checkbox" autocomplete="off" name="press" >
              </div>

              <div class="form-group">
                <label for="recipient-name" class="col-form-label font-weight-bold" style="font-size: 20px;">imgcover:</label>
                <div>
                  <button class="position-relative btn btn-outline-dark"> <span>添加封面</span> <input type="file" style="opacity: 0;position: absolute; left: 0;top: 0; width: 100%;height: 100%;" autocomplete="off" required name="image" ><img src="" class="uploadimg" width="150" height="100" alt=""></button>
                </div>
              </div>

              <div class="form-group">
                <label for="recipient-name" class="col-form-label font-weight-bold" style="font-size: 20px;">title:</label>
                <input type="text" autocomplete="off" class="form-control" name="title">
              </div>
              <div class="form-group">
                <label for="recipient-name" class="col-form-label font-weight-bold" style="font-size: 20px;">desc:</label>
                <input type="text" autocomplete="off" class="form-control" name="desc">
              </div>
              <div class="form-group">
                <label for="message-text" class="col-form-label  font-weight-bold" style="font-size: 20px;">Content:</label>
                <textarea class="form-control" autocomplete="off" style="height: 500px;" name="content" ></textarea>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancle</button>
            <button type="button" class="btn btn-primary modify" data-dismiss="modal">modify</button>
          </div>
        </div>
      </div>
    </div>

    <div class="deleteModal p-4 position-fixed" style="top: 45%;right: -100%; background-color: rgba(194, 194, 194, 0.553);">
      <h5>
        Are you sure you want to delete it?
      </h5>
      <div class="d-flex justify-content-end">
        <button class="btn deleteCancle btn-secondary">Cancle</button>
        <button class="btn deleteNews btn-danger">Sure</button>
      </div>
    </div>

    <div style="top: -100px;" class="deleteAlertErr alert position-fixed alert-danger alert-dismissible position-absolute w-100 fade show text-center">
      <button type="button" class="close">&times;</button>
      <strong >Delete error , You have no right to delete someone else's article</strong>
    </div>

    <div style="top: -100px;" class="deleteAlert alert position-fixed alert-success alert-dismissible position-absolute w-100 fade show text-center">
      <button type="button" class="close">&times;</button>
      <strong >Delete successful , About to jump to the homepage</strong>
    </div>

    <div style="top: -100px;" class="modifyAlertErr alert position-fixed alert-danger alert-dismissible position-absolute w-100 fade show text-center">
      <button type="button" class="close">&times;</button>  
      <strong >Modify error , You have no right to edit other people's articles</strong>
    </div>

    <div style="top: -100px;" class="modifyAlert alert position-fixed alert-success alert-dismissible position-absolute w-100 fade show text-center">
      <button type="button" class="close">&times;</button>  
      <strong >Modify successful</strong>
    </div>

    <footer class="bg-dark text-center py-4 text-white">
        © 2023 Climeworks Terms of Use Privacy notice
      </footer>
    <script>
       $('.deleteModal').hide()
       $('.alert').hide()
      function flush() {
        $.get('./php/getNews.php',{id:location.href.slice(location.href.indexOf("id=") + 3)},res => {
        console.log(res);
        $('.banner,main').empty()
        $('.banner').append(`
      <img src="${res.data.image}" draggable="false" class="w-100" alt="" />
      <h3 class="desc w-50 d-none d-md-block">${res.data.news_desc}</h3>
      `)
      $('main').append(`<div class="container">
        <div>
        <h3 class="text-dark d-flex justify-content-between"><span>
          Athor:${res.data.author}</span>
          <div>
            <button class="btn edit btn-secondary  data-whatever="#editNews" data-toggle="modal" data-target="#editNews"">edit</button>
            <button class="btn delete btn-danger">delete</button>
            </div>
          </h3>
        <h3 class="text-dark">Publish time: <i>${res.data.news_createTime}</i></h3>
        <div class="content">
          <h3 class="text-dark">Artical Content:</h3>
          <p class="my-5 " style="font-size:25px;word-spacing:2px;line-height:40px;">${res.data.news_content}</p>
        </div>
      </div>`)
      $('.edit').click(() => {
          $('form [name=author]').val(res.data.author)
          $('form [name=press]').prop('checked',res.data.news_press === '0' ? true : false)
          $('form [name=title]').val(res.data.news_title)
          $('form [name=desc]').val(res.data.news_desc)
          $('form [name=content]').val(res.data.news_content)
          $('form [name=image]').next().prop('src',res.data.image).show().prev().prev().hide()

      })
      $('.delete').click(() => $('.deleteModal').show().animate({right:0}))
    })
    $('.deleteCancle').click(() => $('.deleteModal').animate({right:'-100%'},500,() => $('.deleteModal').hide()))
    $('.deleteNews').click(() => $.post('./php/deleteNews.php',{id:location.href.slice(location.href.indexOf("id=") + 3),admin:localStorage.getItem('username')},res => {
      console.log(res);
      if(res.code === 200) {
        $('.deleteAlert').show().animate({top:100})
        setTimeout(() => location.href = 'home.html',2000)
      }else $('.deleteAlertErr').show().animate({top:100})
    }))

      }
      flush()

      let file
      $('.uploadimg').hide()
      $('[name=image]').change(function() {
        file = $(this).prop('files')[0]
        $(this).prev().hide().next().next().prop('src',URL.createObjectURL(file)).show()
      })
      
      $('.modify').click(() => {
          const data = {
            id:location.href.slice(location.href.indexOf("id=") + 3),
            author:$('form [name=author]').val(),
            press:$('form [name=press]').prop('checked') ? 1 : 0,
            title:$('form [name=title]').val(),
            desc:$('form [name=desc]').val(),
            image:file ? file : '',
            content:$('form [name=content]').val(),
            admin:localStorage.getItem('username')
          }
          const fd = new FormData()
          for(let i in data) fd.append(i,data[i])
          $.ajax({
          url:'./php/modifyNews.php',
          method:'post',
          contentType:false,
          processData:false,
          data:fd,
          success(res) {
            if(res.code === 200) {
              flush()
              return $('.modifyAlert').show().animate({top:100})
            }else return $('.modifyAlertErr').show().animate({top:100})
          }
        })
      })
      $('.alert .close').on('click',function(){
          $(this).parent().animate({top:-100},500,() => function() {$(this).parent().hide()})
        })
      $(".navbar-brand")
        .css("cursor", "pointer")
        .click(() => (location.href = "home.html"));
      localStorage.getItem("username")
        ? $(".navbar-nav")
            .append(
              $(
                `<li class="mx-3"><h4 class="my-auto">Welcome ${localStorage.getItem(
                  "username"
                )}</h4></li>`
              )
            )
            .append(
              $(
                `<li class="mx-3"><a class="text-decoration-none btn btn-yellow logout" href="javascript:void(0)">logout</a></li>`
              )
            )
        : $(".navbar-nav").append(
            $(`<li class="mx-3">
<button class="btn btn-yellow">
<a href="./login.html" class="text-decoration-none text-dark">Login In</a>
</button>
</li>`)
          );
      $(".toast")
        .css({
          right: 20,
          top: -150,
        })
        .hide();
      $(".logout").click(() => {
        $(".toast").show().animate({
          top: 150,
        });
      });
      $(".toast .close").click(() =>
        $(".toast").animate({ top: -150 }, 500, function () {
          $(this).hide();
        })
      );
      $(".toast .cancle").click(() =>
        $(".toast").animate({ top: -150 }, 500, function () {
          $(this).hide();
        })
      );
      $(".toast .sure").click(() => {
        localStorage.removeItem("username");
        location.href = 'home.html'
      });

      let lock = true;
      $(window).on("scroll", function () {
        if ($(this).scrollTop() > $("main").offset().top) {
          if (lock)
            $("header")
              .hide()
              .addClass("fixed-top bg-white")
              .slideDown(300);
          return (lock = false);
        } else {
          $("header").removeClass("fixed-top bg-white")
          lock = true;
        }
      });
    </script>
  </body>
</html>
